<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		
		<style type="text/css">
			
			body,html{
				width: 100%;
				padding-bottom: 2rem;
				height:auto;
			}
			
			#tabs div:after {
				content: "";
				position: absolute;
				display: block;
				width: 0;
				height: .25rem;
				background-color: #282828;
				bottom: 1.0rem;
				left: 50%;
				transition: all .4s;
				transform: translate(-50%, 0);
			}
			
			#tabs div.active:after {
				width: 2.0rem;
			}
			
			#tabs div:after {
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}
			
			.webkit {
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				;
			}
			
			.hide{
				display: none;
			}
			
			#chapter {
				color: #666;
				font-size: 1.25rem;
				line-height: 1.5rem;
			}
			
			#chapter .item:nth-last-child(1) {
				border: none;
			}
			
			.item {
				justify-content: space-between;
				padding: 0.8rem 0;

				display: flex;
			}
			
			.item b {
				margin-bottom: 0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.35rem;
			}
			
			.item em {
				display: block;
				width: 3.666666rem;
				height: 1.833333rem;
				border: 1px solid #666;
				border-radius: 0.549999rem;
				text-align: center;
				line-height: 1.833333rem;
				font-size: 1.166666rem;
			}
			
		</style>
	</head>
	<body>
        <div id="top_html"></div>
        <div id="comment_html"></div>
        <div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 1000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;"></div>
        <!--回到首页-->
		<img class="backToHome hide" src="img/backToHome.png" style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
	</body>
	<script type="text/html" id="top_template">
        	<img src="{{@data.banner | addUrl}}" style="width: 100%; height: 16rem;" />
        	<p style="margin: 1.5rem 0 0.5rem 2.0rem; font-size: 1.7rem; color: #333333;">{{@data.bookname}}</p>
        	<p style="margin: 0 0 1.5rem 2.0rem; font-size: 1.4rem; color: #999999;">{{@data.contentsummary}}</p>
        	<div style="width: 100%; height: 1.0rem; background-color: rgb(246,246,246);"></div>
        	<div id="tabs" style="height: 6rem;align-items: center;justify-content: space-around;font-size: 1.5rem;color: #666;display: flex;background: #FFFFFF;">
			<div class="active" style="position: relative;width: 50%;text-align: center;height: 100%;line-height: 6rem;">详情</div>
			<div style="position: relative;width: 50%;text-align: center;height: 100%;line-height: 6rem;">目录</div>
		</div>
		<div class="content_item" align="center" style="padding: 1.0rem 2.0rem 2.0rem 2.0rem;">{{@data.content}}</div>
		<div id="chapter" class="chapter_item hide">
			{{each data.chapterList}}
				<div class="item flex"  data-chapterid={{$value.chapterid}}>
					<div style="display: block;width: 83%; padding-left: 2.0rem;">
						<img src="icon/chapter_player.png" style="width: 2.0rem; height: 2.0rem;vertical-align: middle;display: inline; margin-right: 1.0rem;">
						<b class="aui-ellipsis-1" style="vertical-align: middle;display: inline;">{{$index + 1}}.　{{$value.chaptername}}</b>
						{{if progessArr[$index] != 0}}
						<p style="padding-left: 6rem; padding-top: 0.6rem; font-size: 1.3rem; color: #999999;">{{$value.chapterduration}}<span style="color:#feb255;">
							{{progessArr[$index]}}
						</span></p>
						{{else}}
						<p style="padding-left: 6rem; padding-top: 0.6rem; font-size: 1.3rem; color: #999999;">{{$value.chapterduration}}</p>
                       {{/if}}
					</div>
				</div>
			{{/each}}
		</div>
		
		<div id="footer" style="width: 100%;height: 4.58rem;overflow: hidden;position: fixed;bottom: 0;left: 0;display: block;">
		       {{if data.isorder == 1 || userVip.type == 1}}
		       <div id="note_book" class="col-xs-5" data-src="{{data.mapping_img | addUrl}}" style="background: #FFFFFF;border-top: 1px solid #EEEEEE;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;">
						学霸笔记
				</div>
		       <div id="openChapter" class="col-xs-7" style="background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;">
						开始听书
				</div>
		        {{else}}
		        {{if dict}}
		        <div id="pay_book" class="col-xs-5" style="background: #FFFFFF;border-bottom: 1px solid #FFFFFF;text-align: center;border-top: 1px solid #E5E5E5;font-size: 16px;color: #282828;">
						购买¥{{data.bookprice}}<br /><span id="" style="font-size: 12px;">优惠券已抵扣{{dict.price}}元</span>
					</div>
		        {{else}}
		        <div id="pay_book" class="col-xs-5" style="background: #FFFFFF;border-top: 1px solid #EEEEEE;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;">
						购买¥{{data.bookprice}}
				</div>
		        {{/if}}
				<div id="buy" class="col-xs-7" style="background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;">
						{{if userVip.type==-1}}
						VIP已到期，去续费
						{{else}}
						加入VIP，免费听书
						{{/if}}
				</div>
		        {{/if}}	
		</div>
    </script>
    
    <script type="text/html" id="comment_template">
    <div class="content_item">
    	<p style="margin: 2.0rem 2.0rem; font-size: 2.0rem; font-weight: bold; color: #333333; float: left;">用户评价</p>
		{{if commentList.length}}
		<p id="comment" style="margin: 2.3rem 2.0rem; font-size: 1.4rem; font-weight: bold; color: #666666; float: right;">{{"查看" + commentNum + "条评论 >"}}</p>
		{{each commentList}}
							<div style="width: 100%;padding: 1rem 2rem;overflow: hidden;padding-bottom: 0;" class="border-b">
								<div class="clearfix">
									<img src="{{$value.headimg | addFaceUrl}}" style="width: 3.3333rem;height: 3.3333rem;border-radius: 100%;float:left;margin-right: 1rem;" />
									<div style="float: left;">
										<div style="color: #333;">{{$value.nickname}}</div>
										<div style="color: #999;">{{timeFormat($value.gmtCreated) }}</div>
									</div>
									<div class="col-xs-2 praise-parent" style="padding-right:0;padding-left: 0;float: right;">
										{{if $value.islike}}
										<img class="praise" data-isfavor="true"  src="icon/button_praise_pressed.png30.png" alt="" style="vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;">
											{{else}}
											<img class="praise" data-isfavor="false" src="icon/dianzan@2x.png" timeDot="{{$value.id}}" style="vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;">
											{{/if}}
										<p class="count" style="float:left;line-height:1.77rem;margin-left:0.33rem;font-size:13px;color:#666666;">{{$value.likeCount||0}}</p>
									</div>
								</div>
								<div style="padding:1rem 0 1rem 4.3333rem;">
									{{$value.content}}
								</div>
								{{if $value.replys}}
									<div style="padding:0rem 0rem 1rem 4.3333rem;">
										<div style="background: #f3f5f7;padding: 0.5rem 0.5rem;">
											<span style="float:left;color: #5bae6b;">作者回复：</span> {{each $value.replys}}
											<div>{{$value.content}}</div>
										{{/each}}
										</div>
									</div>
								{{/if}}
							</div>
							{{/each}}
		{{else}}
		{{if commentNum > 0}}
		<p id="comment" style="margin: 2.3rem 2.0rem; font-size: 1.4rem; font-weight: bold; color: #666666; float: right;">{{"查看" + commentNum + "条评论 >"}}</p>
		{{else}}
		<p id="comment" style="margin: 2.3rem 2.0; font-size: 1.4rem; font-weight: bold; color: #666666; float: right;">写评论 ></p>
		{{/if}}
		<p style="height: 15rem; line-height: 15rem; padding-top:3.5rem; font-size: 1.32rem; color: #999999;">与世界分享你的智慧</p>
		{{/if}}
    </div>
    </script>
    <div class="MD_alertView hide">
	<div class="MD_blackView" style="position: fixed; top: 0; left: 0;width: 100%;height: 100%;z-index: 10000;background: rgba(38,38,38,0.66);"></div>
	<div class="MD_bigView" style="background-color: white; position: fixed; left: 15%; width: 70%; height: auto; top: 20rem; border-radius: .8rem; z-index: 10001;">
		<p class="alert_title" align="center" style="font-size: 1.7rem; color: #333333; font-weight: bold;margin: 2rem 1.5rem;"></p>
		<div style="background-color: #EEEEEE;width: 100%;left: 0;height: 0.1rem;"></div>
		<div class="cancelBtn" align="center" style="left: 0; width: 50%; font-size: 1.5rem; height: 4.0rem; color: rgb(2,86,234);padding-top: 1.1rem;margin-bottom: 1.5rem;border-right: .1rem solid #EEEEEE;"></div>
		<div class="saveBtn" align="center" style="margin-left: 50%;margin-top: -5.5rem; width: 50%; font-size: 1.5rem; height: 4.0rem; color: rgb(2,86,234); padding-top: 1.1rem;"></div>
	</div>
</div>
</html>

<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var openId2 = GetQueryString("openId2");
	var bookId = GetQueryString('bookid');
	var videoauthorid = GetQueryString('videoauthorid');
	videoauthorid = 10000;
	var copywriter = GetQueryString('copywriter');
	copywriter = 10000;
	var toast = new auiToast();
	var bookname;
	var bookimg;
	var dict;
	var isorder;
	
	template.defaults.imports.timeFormat=function(str){  
	    var date=str.split(' ')[0];
		var dateStr=date.split('-')[1]+'-'+date.split('-')[2];
		var time=str.split(' ')[1]
		var timeStr=time.split(':')[0]+':'+time.split(':')[1];
		return dateStr+' '+timeStr
	}
	
	template.defaults.imports.addFaceUrl = function(value) {
		if(value == "" || value == null) {
			return "img/book.png"
		} else {
			if(checkURL(value)) {
				return value;
			} else {
				return imgFaceurl + value
			}
		}
	};
	
	 $('.backToHome').click(function(){
	 	location.href = "index.html?merchantId="+merchantId
     })
    if(GetQueryString('home')){
        $('.backToHome').removeClass('hide')
    }
	$(function() {
		function after() {
			toast.loading({
				title: "加载中",
				duration: 2000
			});
            var sign = hex_md5(objKeySort({token:token,timestamp:date,bookid:bookId,merchantId:merchantId}))
            $.ajax({
				type: "get",
                url: hostUrl + "product/book/detail/" + token + "/"+ sign +"/"+ date +"/" + bookId + "/" + merchantId,
				async: true,
				success: function(data) {
					if (userVip.type == 1 || data.data.isorder == 1) {
						isorder = 1;
					}else {
						isorder = 0;
					}
					
					toast.hide();
					bookname = data.data.bookname;
					bookimg = data.data.bookimg;
					
					if (window.localStorage) {
						var progess;
						var progessArr = new Array();
						for (var i = 0; i < data.data.chapterList.length; i ++) {
							var value = localStorage.getItem(bookId + "_" + i);
							if (value) {
								var currentTime = parseInt(value.split("_")[0]);
							    var duration = parseInt(value.split("_")[1]);
							    if (currentTime > 0 && duration > 0) {
							    	   progess = "已听" + parseInt((currentTime * 100) / duration) + "%";
							    }else {
							    	   progess = "0";
							    }
							}else {
								progess = "0";
							}
							progessArr.push(progess);
					    }
					}

					// 分享功能
                    var userInfo=JSON.parse(sessionStorage.getItem('weixinData')).data;


                        var titleStr = userInfo.nickname + "分享一本《" + bookname + "》听书给你，立即查看=" + bookId;
                        shareWx(titleStr, data.data.bookimg, data.data.bookrecommend);

                    data.progessArr = progessArr;//音频播放百分比
                    data.userVip=userVip;
                    var top_html = template("top_template", data);
                    document.getElementById('top_html').innerHTML = top_html;
                }
			});
	}
		getToken(after);
		
		function getCommentList(){
			$.ajax({
				type: "get",
				url:hostUrl + "product/comment/list?productId=" + bookId + "&rows=100&page=1&recommend=0&openId="+openId,
				async: true,
						success: function(data) {
							if (data.data.list) {
								data.commentNum = data.data.list.length;
							$.ajax({
								type:"get",
								url:hostUrl + "product/comment/list?productId=" + bookId + "&rows=100&page=1&recommend=0&openId="+openId,
								async:true,
								success: function(data1){
									data.commentList = data1.data.list;
									var comment_html = template("comment_template", data);
									document.getElementById('comment_html').innerHTML = comment_html;
								}
							});
							}
						}
					});
		}
		getCommentList();
		
		$("#top_html").on("click", "#chapter .item", function() {
			var chapterIndex = $(this).index();
			if(isorder == 1) {
				var url="chapter.html?themeisorder=1&bookid=" + bookId + "&chapterIndex=" + chapterIndex + "&bookname="+bookname+"&bookimg=" + bookimg;
				location.href = url;
			} else {
				if(openId == 0) {
					weekTip("请先登录");
				} else {
					createAlertView("精品小课,购买后才能阅读","取消","购买");
				}
			}
		})
		
		$("#top_html").on('click', '#openChapter', function() {
			var url="chapter.html?themeisorder=1&bookid=" + bookId + "&bookname="+bookname+"&bookimg=" + bookimg;
			location.href = url
		});
		
		$("#top_html").on('click', '#note_book', function() {
			window.location.href = "mind.html?src=" + $(this).attr('data-src') + "&bookname=" + Q.encode($("#bookname").text());
		});
		
		//支付
		$("#top_html").on('click', '#pay_book', function(e) {
			e.stopPropagation();
			payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 4, bookId, false);
		})
		
		$("#top_html").on('click', '#buy', function() {
			var url="memberPage.html?shareBack=1"
			location.href=url;
		});
		
		$('#top_html').on('click','#tabs div', function() {
			var index = $(this).index();
			if (index == 0) {
				$('.chapter_item').addClass('hide');
				$('.content_item').removeClass('hide');
			}else {
				$('.chapter_item').removeClass('hide');
				$('.content_item').addClass('hide');
			}
			$('#tabs div').removeClass('active');
			$(this).addClass('active');
		});
		
		$("#comment_html").on('click', '#comment', function(e) {
			e.stopPropagation();
			location.href = "comment.html?bookid=" + bookId + "&type=4";
		})
		
		
		$("body").on('click', ".praise-parent", function() {
			var _this=$(this).find('.praise')
			if(userId == 0) {
				$("#warn").show();
				setTimeout(function() {
					$("#warn").hide();
				}, 2000)
			} else {
				if(_this.attr("data-isfavor") == "false") {
					_this.attr("src", "icon/button_praise_pressed.png30.png");
					_this.attr("data-isfavor", "true");
					var s = _this.siblings('.count').html() - 0;
					_this.siblings('.count').html(s + 1);
                    var url = hostUrl + "product/comment/like?id=" + _this.attr('timeDot') + "&openId=" + openId;
					$.ajax({
						type: "get",
						url: url,
						async: true,
						success: function(data) {
						}
					});
				} else {
					weekTip("您已点过赞");
				}
			}
		})
	})
	
	var isPageHide = false;
    window.addEventListener('pageshow', function () {
        setTimeout(function(){
        	  	if (isPageHide) {
              location.reload()
            }
		  },500)
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
    
    function createAlertView(titleStr,btn1,btn2){
		$('.MD_alertView').removeClass('hide');
		$('.alert_title').text(titleStr);
		$('.cancelBtn').text(btn1);
		$('.saveBtn').text(btn2);
		//禁止滑动
		document.body.style.overflow = 'hidden';
		window.addEventListener('touchmove',_preventDefault);
	}
	
	$('.cancelBtn').click(function(){
		//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.MD_alertView').addClass('hide');
	})
	
	$('.saveBtn').click(function(){
		//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.MD_alertView').addClass('hide');
		payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 2, GetQueryString('bookid'), false);
	})
	
	$('.MD_blackView').click(function(){
		//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.MD_alertView').addClass('hide');
	})
	
	function _preventDefault(e){
         e.preventDefault();
	}
    
</script>
